import {p} from '../ajax.js'
var div2 = document.getElementById("iot-div2");
var ul = document.getElementById("iot-ul1");
var div3 = document.getElementById("iot-div3");
div2.appendChild(ul);
var flexbox1 = document.getElementById("iot-flexbox1");
p("https://api-hmugo-web.itheima.net/api/public/v1/categories").then((res)=>{
    return res.message;
}).then((message)=>{
    console.log(message);
    //创建列表
    for(var i = 0;i<message.length;i++){
        var li = document.createElement("li");
        ul.appendChild(li);
        li.setAttribute("id","iot-li"+i);
        //document.getElementById("iot-li"+i).addEventListener("click",change1);
        li.innerHTML = message[i].cat_name;
        li.style.listStyleType = "none";
        li.style.lineHeight = "350%";
        li.style.width = "100%";
        li.style.textAlign = "center";
        li.style.backgroundColor = "aliceblue"
    }

//初始化
    for(var j=0;j<message[0].children.length;j++){
        let jj = j;
        var div3_1 = document.createElement("div");
                div3.appendChild(div3_1);
                div3_1.innerHTML = '<b>' + '/' + message[0].children[j].cat_name + '/' + '</b>';
                div3_1.style.width = "100%";
                div3_1.style.aspectRatio = "15/1";
                div3_1.style.textAlign = "center";
                div3_1.style.fontSize = "0.15rem";
        for(var k=0;k<message[0].children[j].children.length;k++){
                let kk = k;
            // window[name1+k] = document.createElement("div");
            // window[name2+k] = document.createElement("img");
            // window[name3+k] = document.createElement("span");
            // div3.appendChild(window[name1+k]);
            // window[name1+k].appendChild(window[name2+k]);
            // window[name1+k].appendChild(window[name3+k]);
            
            

            // window[name1+k].style.width = "31.99%"
            // window[name1+k].style.textAlign = "center"
            // window[name2+k].src = message[0].children[j].children[k].cat_icon;
            // window[name2+k].style.width = "100%"
            
            // window[name3+k].innerHTML = message[0].children[j].children[k].cat_name;
            // window[name3+k].style.fontSize = "0.15rem"
            // window[name2+k].style.aspectRatio = "1/1"

            var div = document.createElement("div");
            var img = document.createElement("img");
            var span = document.createElement("span");
            div3.appendChild(div);
            div.appendChild(img);
            div.appendChild(span);
            
            // div.setAttribute("id","iot-div"+j+"-"+k);

            div.style.width = "31.99%"
            div.style.textAlign = "center"
            img.src = message[0].children[j].children[k].cat_icon;
            img.style.width = "100%"
            
            span.innerHTML = message[0].children[j].children[k].cat_name;
            span.style.fontSize = "0.15rem"
            img.style.aspectRatio = "1/1"

            //实现跳转
            div.setAttribute("id","iot-div"+j+"-"+k);
            span.setAttribute("id","iot-span"+j+"-"+k);
            document.getElementById("iot-div"+j+"-"+k).addEventListener("click",fn1);
            function fn1(){

                //console.log(jj+"-"+kk);
                var name = document.getElementById("iot-span"+jj+"-"+kk).innerHTML;
                console.log(name);
                window.open("商品列表.html?name="+encodeURI(name),"_self")//传参name,_self此窗口打开页面
                  
            } 
        }
    }


    //局部刷新
    function creatAndAppend2(name1,name2,name3){
        for(var i = 0;i<message.length;i++){
            let ii =i;
            document.getElementById("iot-li"+i).addEventListener("click",change1);
            function change1(){
                console.log(ii);
            //清除内容，准备下次刷新
            div3.innerHTML = '';
            //列表【其他】项 位置特殊，额外添加
            if(ii == 28){
                var div3_1 = document.createElement("div");
                    div3.appendChild(div3_1);
                    div3_1.innerHTML = '<b>' + '/' + message[ii].children[25].cat_name + '/' + '</b>';
                    div3_1.style.width = "100%";
                    div3_1.style.aspectRatio = "15/1";
                    div3_1.style.textAlign = "center";
                    div3_1.style.fontSize = "0.15rem";
                    for(var k=0;k<message[ii].children[25].children.length;k++){
                        let kk = k;
                        //m++;
                        //console.log(k);
                        // window[name1+k] = document.createElement("div");
                        // window[name2+k] = document.createElement("img");
                        // window[name3+k] = document.createElement("span");
                        // div3.appendChild(window[name1+k]);
                        // window[name1+k].appendChild(window[name2+k]);
                        // window[name1+k].appendChild(window[name3+k]);
                        // window[name1+k].style.width = "31.99%"
                        // window[name1+k].style.textAlign = "center"
                        // window[name2+k].src = message[ii].children[25].children[k].cat_icon;
                        // window[name2+k].style.width = "100%"
                        // window[name3+k].innerHTML = message[ii].children[25].children[k].cat_name;
                        // window[name3+k].style.fontSize = "0.15rem"
                        // window[name2+k].style.aspectRatio = "1/1"

                        var div = document.createElement("div");
                        var img = document.createElement("img");
                        var span = document.createElement("span");
                        div3.appendChild(div);
                        div.appendChild(img);
                        div.appendChild(span);
            
            // div.setAttribute("id","iot-div"+j+"-"+k);

                        div.style.width = "31.99%"
                        div.style.textAlign = "center"
                        img.src = message[ii].children[25].children[k].cat_icon;
                        img.style.width = "100%"

                        span.innerHTML = message[ii].children[25].children[k].cat_name;
                        span.style.fontSize = "0.15rem"
                        img.style.aspectRatio = "1/1"


            div.setAttribute("id","iot-div"+"25"+"-"+k);
            span.setAttribute("id","iot-span"+"25"+"-"+k);
            document.getElementById("iot-div"+"25"+"-"+k).addEventListener("click",fn1);
            function fn1(){

                //console.log(jj+"-"+kk);
                var name = document.getElementById("iot-span"+"25"+"-"+kk).innerHTML;
                console.log(name);
                window.open("商品列表.html?name="+encodeURI(name),"_self")//传参name,_self此窗口打开页面
                        
                    }        
            }
        }
            else{
        for(let j=0;j<message[ii].children.length;j++){
            let jj = j;
            //var m=0;
            //var n = j;
            var div3_1 = document.createElement("div");
            div3.appendChild(div3_1);
             //此图片位置特殊，额外添加
             if(ii==1&&j==1){
                window[name1+1] = document.createElement("div");
                window[name2+1] = document.createElement("img");
                window[name3+1] = document.createElement("span");
                div3.appendChild(window[name1+1]);
                window[name1+1].appendChild(window[name2+1]);
                window[name1+1].appendChild(window[name3+1]);
                window[name1+1].style.width = "31.99%"
                window[name1+1].style.textAlign = "center"
                window[name2+1].src = message[ii].children[j].cat_icon;
                window[name2+1].style.width = "100%"
                
                window[name3+1].innerHTML = message[ii].children[j].cat_name;
                window[name3+1].style.fontSize = "0.15rem"
                window[name2+1].style.aspectRatio = "1/1"
                div3_1.innerHTML = '<b>' + '/' + message[ii].children[j].cat_name + '/' + '</b>';
                window[name1+1].addEventListener("click",fn1);
                function fn1(){
    
                                //console.log(jj+"-"+kk);
                                var name = window[name3+1].innerHTML;
                                console.log(name);
                                window.open("商品列表.html?name="+encodeURI(name),"_self")//传参name,_self此窗口打开页面
                    }
                

        //         var div = document.createElement("div");
        //         var img = document.createElement("img");
        //         var span = document.createElement("span");
        //         div3.appendChild(div);
        //         div.appendChild(img);
        //         div.appendChild(span);
                
        //         // div.setAttribute("id","iot-div"+j+"-"+k);
    
        //         div.style.width = "31.99%"
        //         div.style.textAlign = "center"
        //         img.src = message[ii].children[j].cat_icon;
        //         img.style.width = "100%"
                
        //         span.innerHTML = message[ii].children[j].cat_name;
        //         span.style.fontSize = "0.15rem"
        //         img.style.aspectRatio = "1/1"
        //         div3_1.innerHTML = '<b>' + '/' + message[ii].children[j].cat_name + '/' + '</b>';
    
    
        //         div.setAttribute("id","iot-div"+j);
        //         span.setAttribute("id","iot-span"+j);
        //         document.getElementById("iot-div"+j).addEventListener("click",fn1);
        //         function fn1(){
    
        //             //console.log(jj+"-"+kk);
        //             var name = document.getElementById("iot-span"+jj).innerHTML;
        //             console.log(name);
        //             window.open("商品列表.html?name="+encodeURI(name),"_self")//传参name,_self此窗口打开页面
        // }
    }

            // var div3_1 = document.createElement("div");
            //         div3.appendChild(div3_1);

                   //正常数据局部刷新
                    div3_1.innerHTML = '<b>' + '/' + message[ii].children[j].cat_name + '/' + '</b>';
                    div3_1.style.width = "100%";
                    div3_1.style.aspectRatio = "15/1";
                    div3_1.style.textAlign = "center";
                    div3_1.style.fontSize = "0.15rem";
            for(var k=0;k<message[ii].children[j].children.length;k++){
                let kk = k;
                // window[name1+k] = document.createElement("div");
                // window[name2+k] = document.createElement("img");
                // window[name3+k] = document.createElement("span");
                // div3.appendChild(window[name1+k]);
                // window[name1+k].appendChild(window[name2+k]);
                // window[name1+k].appendChild(window[name3+k]);
                // window[name1+k].style.width = "31.99%"
                // window[name1+k].style.textAlign = "center"
                // window[name2+k].src = message[ii].children[j].children[k].cat_icon;
                // window[name2+k].style.width = "100%"
                
                // window[name3+k].innerHTML = message[ii].children[j].children[k].cat_name;
                // window[name3+k].style.fontSize = "0.15rem"
                // window[name2+k].style.aspectRatio = "1/1"


                var div = document.createElement("div");
                var img = document.createElement("img");
                var span = document.createElement("span");
                div3.appendChild(div);
                div.appendChild(img);
                div.appendChild(span);
                
                // div.setAttribute("id","iot-div"+j+"-"+k);
    
                div.style.width = "31.99%"
                div.style.textAlign = "center"
                img.src = message[ii].children[j].children[k].cat_icon;
                img.style.width = "100%"
                
                span.innerHTML = message[ii].children[j].children[k].cat_name;
                span.style.fontSize = "0.15rem"
                img.style.aspectRatio = "1/1"
    
    
                div.setAttribute("id","iot-div"+j+"-"+k);
                span.setAttribute("id","iot-span"+j+"-"+k);
                document.getElementById("iot-div"+j+"-"+k).addEventListener("click",fn1);
                function fn1(){
    
                    //console.log(jj+"-"+kk);
                    var name = document.getElementById("iot-span"+jj+"-"+kk).innerHTML;
                    console.log(name);
                    window.open("商品列表.html?name="+encodeURI(name),"_self")//传参name,_self此窗口打开页面
                }





                // if(m==message[ii].children[j].children.length){
                //     window[name1+j+m] = document.createElement("div");
                //     div3.appendChild(window[name1+j+m]);
                //     window[name1+j+m].innerHTML = '<b>' + '/' + message[ii].children[n].cat_name + '/' + '</b>';
                //     window[name1+j+m].style.width = "100%";
                //     window[name1+j+m].style.aspectRatio = "15/1";
                //     window[name1+j+m].style.textAlign = "center";
                //     window[name1+j+m].style.fontSize = "0.15rem";
                // }
            } 
        }
    }
}
}}
    creatAndAppend2("div","img","span");
    
})
